<!doctype html>
<html><head>
<script>
if ('undefined' === typeof WeakMap) {
  WeakMap = function () {
    return {
      "get": function (key, defaultValue) { return defaultValue; },
      "set": function (key, value) {} 
    };
  };
}
</script>

<script src="e4h-string-template.js"></script>
</head><body>

<p>
The header with text "Hello &lt;World&gt;!" should appear below in red on a yellow background.
Tooltip text should say "static".
<style>
.foobar { color: red }
#hello { background: yellow }
</style>
<script>
document.body.appendChild(
  e4h(
    {
      raw: [
        '@<section title="static" id=',
        ' class="foo',
        '"><h1>',
        '</h1></section>'
      ],
    },
    "hello",
    "bar",
    "Hello <World>!"
  )
);
</script>
</p>

<hr>

<p>
The first input should be initially checked, the second not.
<script>(function () {

var fragment =
  e4h(
    {
      raw: [
        '<><input type="checkbox" checked?=',
        '/><input type="checkbox" checked?=',
        '/></>'
      ],
    },
    true,
    false
  );
while (fragment.firstChild) {
  document.body.appendChild(fragment.firstChild);
}

}());</script>
</p>

</body></html>
